<template>
	<view class="container">
		<view class="userinfo  plr15 ptb15  posRelative radius10">
			<view class="bg posAbsort">

			</view>
			<view class="bgWhite radius15  mt25 posRelative" style="z-index: 999;">
				<view class="mb15 posRelative " style="text-align: center;height: 110rpx;">
					<view class="avatar-box">
						<image :src="userInfo.avatar" mode=""></image>
					</view>
					<view class="" style="height: 60rpx;">

					</view>
					{{userInfo.username}}
				</view>
				<view class=" grid boxshadow20 align-center justify-between">
					<navigator url="/pages/study/index" open-type="switchTab" hover-class="none" class="flex1 justify-center flex-col align-center">
						<image src="/static/images/my1.png" mode="widthFix"></image>
						<view class="">
							学习
						</view>
					</navigator>
					<view class="flex1 justify-center flex-col align-center">
						<image src="/static/images/my2.png" mode="widthFix"></image>
						<view class="">
							报名
						</view>
					</view>
					<navigator url="/pages/exam/index" open-type="switchTab" hover-class="none" class="flex1 justify-center flex-col align-center">
						<image src="/static/images/my3.png" mode="widthFix"></image>
						<view class="">
							考试
						</view>
					</navigator>
					<view class="flex1 justify-center flex-col align-center">
						<image src="/static/images/my4.png" mode="widthFix"></image>
						<view class="">
							签到
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bgWhite plr15 pt15 pb5 mlr15 mt15 radius10 boxshadow20">
			<view class="mb10  griditem justify-between">
				<image src="../../static/images/my5.png" mode=""></image>
				<navigator url="/pages/order/index" hover-class="none" class="flex1 justify-between align-center">
					<text>订单</text>
					<uv-icon name="arrow-right"></uv-icon>
				</navigator>
			</view>
			<view class="mb10  griditem justify-between">
				<navigator url="/pages/my/accountManage" hover-class="none" class="flex1 justify-between align-center">
					<image src="../../static/images/my6.png" mode=""></image>
					<view class="flex1 justify-between align-center">
						<text>设置</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</navigator>
			</view>
			<navigator url="/pages/resetPwd/index" hover-class="none" class="mb10  griditem justify-between">
				<image src="../../static/images/my11.jpg" mode=""></image>
				<view class="flex1 justify-between align-center">
					<text>密码</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</navigator>
			<navigator url="/pages/webDy/index" hover-class="none" class="mb10  griditem justify-between" >
				<image src="../../static/images/my7.png" mode=""></image>
				<view class="flex1 justify-between align-center">
					<text>答疑</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</navigator>
			<view class="mb10  griditem justify-between">
				<image src="../../static/images/my8.png" mode=""></image>
				<view class="flex1 justify-between align-center">
					<text>新闻</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<navigator url="/pages/certifate/index" hover-class="none" class="mb10  griditem justify-between">
				<image src="../../static/images/my9.png" mode=""></image>
				<view class="flex1 justify-between align-center">
					<text>证书</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</navigator>
			<view class="mb10  griditem justify-between" @click="logout">
				<image src="../../static/images/my10.png" mode=""></image>
				<view class="flex1 justify-between align-center">
					<text>退出</text>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view>

		<!-- <view class="logout" @click="logout">
			退出登录
		</view> -->
		<uv-picker :columns="roleList" keyName="roleName" ref="picker" @confirm="confirmChange"></uv-picker>

	</view>
</template>

<script>
	let app = getApp();
	export default {
		components: {

		},
		data() {
			return {
				act: 0,
				dataInfo: {},
				certificateNum: '',
				value: "",
				userInfo: {},
				roleList: [
					[]
				],
				currentRoleId: ""
			}
		},
		onLoad(opt) {

		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.$api.userIndex().then(res => {
				this.userInfo = res.data
			})
			// if(this.$utils.checkLogin){

			// 	this.roleList[0]= this.userInfo.roles
			// 	this.currentRoleId=this.userInfo.currentRoleId
			// }else{
			// 	uni.reLaunch({
			// 		url:'/pages/login/login'
			// 	})
			// }
		},
		mounted() {


		},
		methods: {
			confirmChange(e) {
				if (this.currentRoleId != e.value[0].roleId) {
					this.$api.changeRoleOrGroup({
						userId: this.userInfo.userId,
						groupId: '0',
						roleId: e.value[0].roleId
					}).then(res => {
						console.log(res)
						if (res.code == 1000) {
							this.userInfo = res.data
							uni.setStorageSync('userInfo', res.data)
							uni.setStorageSync('menus', res.data.permissions)
							this.roleList[0] = this.userInfo.roles
							this.currentRoleId = this.userInfo.currentRoleId
						}
					})
				}
			},
			logout() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: 12345
				})
			},
			showRoleChange() {
				this.$refs.picker.open()
			}
		}





	}
</script>
<style scoped lang="scss">
	.container {
		height: 100vh;
		// background: linear-gradient(180deg, #4375f2, #fff);

	}

	.userinfo {
		// padding-top: 100rpx;
		// height: 400rpx;



		background-size: 100% 200rpx;
		background-repeat: no-repeat;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.bg {
			background-color: #0F7EF2;
			border-radius: 0 0 150rpx 150rpx;
			height: 300rpx;
			left: 0;
			top: 0;
			width: 100%;

		}
	}

	.griditem {
		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}

		border-bottom: 1px solid #e2e2e2;
		padding-bottom: 30rpx;

		&:last-child {
			border: none;
			padding-bottom: 0;
		}
	}

	.logout {
		background-color: #4375f2;
		height: 100rpx;
		margin: 30rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #fff;
		letter-spacing: 10rpx;
		font-weight: 500;
	}

	.avatar-box {
		background-color: #fff;
		border-radius: 50%;
		margin: -60rpx auto 0;
		width: 120rpx;
		position: absolute;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		right: 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	.grid {
		border-top: 2rpx solid #e2e2e2;
		padding: 30rpx 0;
	}
</style>